<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Sprite Sheet Example</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
</head>

<body onload="init();">

	<div id="loader"></div>

	<header id="header" class="EaselJS">
		<h1><span class="text-product">Easel<strong>JS</strong></span> Sprite Sheets</h1>
		<p>An example of a sprite sheet using <strong>BitmapAnimation</strong>. This demos also shows playing named
			animations (jump and run), and animation chaining using <strong>getAnimation("name").next</strong>.
			Click the stage to initialize a jump, which will continue back into the run when it is complete.</p>
		<p>Some browsers can not load images or access pixel data when running local files, and may throw a security error or not
	    			work unless the content is running on a server.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>

    <script src="./assets/easeljs-NEXT.min.js"></script>

	<!-- Note: All PreloadJS classes are listed here: -->
    <script type="text/javascript" src="../src/createjs/events/Event.js"></script>
    <script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/Proxy.js"></script>
    <script type="text/javascript" src="../src/preloadjs/AbstractLoader.js"></script>
    <script type="text/javascript" src="../src/preloadjs/LoadQueue.js"></script>
    <script type="text/javascript" src="../src/preloadjs/TagLoader.js"></script>
    <script type="text/javascript" src="../src/preloadjs/XHRLoader.js"></script>

    <!-- We also provide hosted minified versions of all CreateJS libraries.
    	  http://code.createjs.com -->

    <script type="text/javascript">

        var assets;
        var stage;
        var w, h;
        var sky, grant, ground, hill, hill2;
        var runningRate, isInWarp, isStationary;
        var stationaryPosition, isPassed, spriteSheet;

        function init() {
            if (window.top != window) {
                document.getElementById("header").style.display = "none";
            }

            document.getElementById("loader").className = "loader";

            var canvas = document.getElementById("testCanvas");
            stage = new createjs.Stage(canvas);

            runningRate = 2.5;
            isInWarp = false;
            isStationary = false;
            stationaryPosition = 300;
            isPassed = false;

            spriteSheet = {
                "frames": {
                    "width": 200,
                    "numFrames": 64,
                    "regX": 2,
                    "regY": 2,
                    "height": 361
                },
                "animations": {"jump": [26, 63], "run": [0, 25]},
                "images": ["assets/runningGrant.png"]
            };

            var ss = new createjs.SpriteSheet(spriteSheet);
            grant = new createjs.Sprite(ss);

            // Set up looping
            ss.getAnimation("run").next = "run";
            ss.getAnimation("jump").next = "run";
            grant.gotoAndPlay("run");

            // Position the Grant sprite
            grant.x = -200;
            grant.y = 40;
            grant.scaleX = grant.scaleY = 0.8;

            // grab canvas width and height for later calculations:
            w = canvas.width;
            h = canvas.height;

            assets = [];

            manifest = [
                {src:"assets/runningGrant.png", id:"grant"},
                {src:"assets/sky.png", id:"sky"},
                {src:"assets/ground.png", id:"ground"},
                {src:"assets/parallaxHill1.png", id:"hill"},
                {src:"assets/parallaxHill2.png", id:"hill2"}
            ];

            loader = new createjs.LoadQueue();
            loader.on("fileload", handleFileLoad);
            loader.on("complete", handleComplete);
            loader.loadManifest(manifest);
            stage.autoClear = false;
        }

        function handleFileLoad(event) {
            assets.push(event);
        }

        function handleComplete() {
            for(var i=0;i<assets.length;i++) {
                var item = assets[i]; //loader.getResult(id);
                var id = item.item.id;
                var result = item.result;

                if (item.type == createjs.LoadQueue.IMAGE) {
                    var bmp = new createjs.Bitmap(result);
                }

                switch (id) {
                    case "sky":
                        sky = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0,0,w,h));
                        break;
                    case "ground":
                        ground = new createjs.Shape();
                        var g = ground.graphics;
                        g.beginBitmapFill(result);
                        g.drawRect(0, 0, w+330, 79);
                        ground.y = h-79;
                        break;
                    case "hill":
                        hill = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0,0,282,59));
                        hill.x = Math.random() * w;
                        hill.scaleX = hill.scaleY = 3;
                        hill.y = 144;
                        break;
                    case "hill2":
                        hill2 = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0,0,212,50));
                        hill2.x = Math.random() * w;
                        hill2.scaleX = hill2.scaleY = 3;
                        hill2.y = 171;
                        break;
                }
            }

            document.getElementById("loader").className = "";

            if (grant == null) {
                //console.log("Can not play. Grant sprite was not loaded.");
                return;
            }

            stage.addChild(sky, ground, hill, hill2, grant);
            stage.on("mousedown", handleJumpStart);

            createjs.Ticker.setFPS(40);
            createjs.Ticker.on("tick", tick);
        }

        function handleJumpStart() {
            grant.gotoAndPlay("jump");
        }

        function tick() {
            var outside = w + 20;
            var position = grant.x+runningRate;
            grant.x = (position >= outside) ? -200 : position;

            ground.x = (ground.x-15) % 330;
            hill.x = (hill.x - 0.8);
            if (hill.x + 838 <= 0) { hill.x = outside; }
            hill2.x = (hill2.x - 1.2);
            if (hill2.x + 633 <= 0) { hill2.x = outside; }

            stage.update();
        }
    </script>
</body>
</html>